<script setup>
import { ref, onMounted, watchEffect } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
    // debugger
    // 一进页面，就聚焦了
    input.value.focus()
})

watchEffect(() => {
    debugger
    if (input.value) {
        input.value.focus()
    } else {
        input.value = '我刚进来'
        // 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
    }
})

</script>

<template>
    <input ref="input" />
</template>
